<html ng-app="mySuperApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>铲屎官信息</title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
       
    </head>
    <style >
        html{font-size: 20px}
        body{
            background-color: #F3F3F3
        }
        .row-white{
            background-color: #fff;
        }
        .bar-positive{
             background-color:#07E9A1 !important;
        }
         .bar-title h4{
            background-color: #07E9A1;
            text-align: center;
            color: #fff;
            height: 2rem;
            line-height: 2rem;
            margin-top: 0;
            margin-bottom: 0;
            letter-spacing: 0.1rem;
        }
         .bar-title h4 img{
              height: 1rem;
              width: 1rem;
              vertical-align: middle;
              float: right;
              margin-top: 4%;
         }
        .right{
            text-align: right;
            line-height: 1.5rem;
            color: #9D9D9D;

        }
        .right-checkbox-toggle{
            text-align: right;
        }
        .right b{
            margin: 0 0.1rem;
        }
        .right a{
             color: #9D9D9D;
        }

        .line{
            border:0;
            border-top: 1px solid #EEEEEE;
        }
        .col-name{
            line-height: 1.5rem
        }
        .right img{
            width: 1.5rem;
            height: 1.5rem;
            vertical-align: middle;
        } 
        .row-title img{
            width: 3rem;
            height: 3rem;
            margin: auto;
        }
         .row-title{
            text-align: center; 
            height:6rem;
            background-color: #07E9A1;
            width: 100%;
         }
        .row-title p{
            text-align: center; 
            letter-spacing: 0.2rem;
            color: #fff;
        }
        .row-up-down{
            background-color: #EDEDED;
            margin: 0.5rem 0;
        }
        .row-sex{
            text-align: center;
            line-height: 1.2rem;
        }
        .row-sex img{
            height: 1.2rem;
            vertical-align: middle;
            margin-right: 0.2rem;
        }
        .row-img{
            line-height: 1.5rem;
        }
         .row-img img{
            vertical-align: middle;
            margin-right: 0.2rem;
        }
         .toggle.toggle-calm input:checked + .track {
             border-color: #07E9A1; 
             background-color: #07E9A1; 
        }
        .right {
           padding-top: 0.7rem;
        }
        .bar.bar-positive {
            background-image: none !important;
          
        }
        .index-row-title{
            padding: 1.5rem 0 0 0;
            height: 8rem;
            text-align: center; 
            width: 100%;
        }
        .index-row-title img{
            width: 3rem;
            height: 3rem;
            margin: auto;
        }
        .index-row-title a{
            color: #232424;
            text-decoration-line: none;
            font-size: 18px;
        }
        .index-dog-top{
            height: 10rem;
           /* background-size: 100% 100%;*/
            background:url("img/beijing.png") center -4rem;
           
        }
        .index-dog-row{
            height: 0.5rem;
            background-color: #EDEDED;
        }
        .card{
            margin: 5px 10px;
        }
        .item-dog-top{
            height: 3rem;
            line-height: 2rem;
            color:#4E6D8D;
        }
        .item-dog-top i{
           float: right;
           vertical-align: middle;
           margin-top: 0.7rem;
        }
        .card-quan{
            margin-top: 1rem;
        }
        .popup-head{
            background-color: #FA4955;

        }
         .popup-head h3{
            color: #fff;
            font-size: 18px;
         }
         .popup-head h3 b{
            float: right;
            font-size: 20px;
         }
          .popup-body {
            padding:1.5rem 3rem ;
            background-color: #fff;
          }
         .popup-body span{
            color: #FF8F35;
         }
         .popup-buttons{
            background-color: #fff;
         }
         .button.button-positive {
            border-color: transparent;
            background-color: #FF8B2E;
            color: #fff;
            border-radius: 5rem;
        }
        .dog-title-top{
            background-color: #5eedbf;
        }
        .dog-title-top h1{
            color: #fff;
        }
         .card img{
          height: 1rem;
          width: 1rem;
          vertical-align: middle;
          margin-right: 0.3rem;
       }
       .item{
          border:0;
      }
       .item-top{   
          width: 100%;
          font-size: 14px;
          background-color: #F8F8F8;
       }
       .item-top label{
        vertical-align: middle;
        line-height: 1rem;
       }
       .item-top span{
          color: #818181;
          line-height: 1rem;
          float: right;
          margin-top: 0.1rem;
          
       }
       .item-top  .em{
            margin: 0 0.1rem !important;
       }
      .item-footer {
          text-align: center;
          padding-top: 0.5rem;
        }
      .item-footer b{
          font-size: 35px;
          font-weight: 500;
          display: block;
          border-right: 1px solid #D3D3D2;
        }
      .item-footer p{
        font-size: 14px;
        color: #778EA5;
        margin-top: 1.5rem;
      }
      .item-divider-bg{
       
        background-color: #fff;
        border:0;
      }
      .card{
        margin: 0px 0px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0); 
      }
      .row-block{
        height: 0.5rem;
        background-color: #EDEDED;
      }
      .item-footer em{
        color: #44D5A5;
        font-size: 24px;
        padding-right: 1rem;
      }
      span{
        color: #D4D4D4;
        font-size: 14px;
      }
      .item-divider-bg i{
          font-size: 35px;
          font-weight: 600;
      }
      .item-divider-bg i em{
        color: #242424;
      }
      .item-toushi{
        margin-top:0.5rem;
      }
      .xq-healthy{
        color: #4BD7A9 !important;
      }
      .xq-healthy i{
          color: #ABABAB;
       }
       .ts-zhuangtai{
        color: #73C3DE !important;
       }
       .ts-zhuangtai i{
          color: #ABABAB;
       }
    </style>
    <body ng-controller="PopupCtrl">

    
     <!-- 导航 -->
      <ion-tabs class="tabs-positive tabs-icon-top">

        <ion-tab title="主子" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
            <ion-view>
                <ion-header-bar class="dog-title-top">
                    <h1 class="title">狗天下</h1>
                </ion-header-bar>
                <ion-content>
                     <div class=" index-dog-top">   
                       <div class="row index-row-title">
                           <div class="col">
                                <a href="#">
                                    <img src="img/gougou.png" />
                                    <br>
                                    <p>米米</p>
                                </a>
                            </div>
                       </div>
                       <div class="row row-sex">
                            <div class="col ">
                               <img src="img/tizhongxiao.png"/> 25kg
                            </div>
                            <div class="col ">
                                 <img src="img/xingbiexiao.png"/> 女生
                            </div>
                             <div class="col ">
                                 <img src="img/pinzhong.png"/> 阿斯拉加
                            </div>
                        </div>
                    </div>
              
                    <div class="row index-dog-row"></div> 
                    

                    <!-- 未绑定页面 -->
                    <!-- <div class="row row-quan" ng-click="showAlert()">
                        <div class="col">
                            <div class="card card-quan">
                                <div class="item item-divider item-dog-top">
                                 添加项圈 <i class="icon ion-plus"></i>
                                </div>
                            </div>
                        </div>     
                    </div>   

                    <div class="row row-food">
                        <div class="col">
                            <div class="card">
                                <div class="item item-divider item-dog-top">
                                 添加投食器<i class="icon ion-plus"></i>
                                </div>
                            </div>
                        </div>     
                    </div>    -->

                   <!--  绑定后页面 -->
                    <div class="row">
                      <div class="col">
                        <div class="card">
                            <div class="item item-divider item-top">
                             <img src="img/xiangquan.png"/>
                             <label>项圈</label>
                             <span class="xq-healthy">健康
                              <em class="em"></em>
                              <i class="icon ion-chevron-right"></i></span>
                            </div>
                            <div class="item item-divider item-footer item-divider-bg">
                              <div class="row">
                                 <div class="col">
                                   <b>6</b>
                                  
                                    <p>今日活跃 /h</p>
                                 </div>
                                 <div class="col">
                                    <b>6</b>
                                  
                                   <p>今日睡眠 /h</p>
                                 </div>
                                 <div class="col">
                                    <b style="border:0">6</b>
                                    
                                    <p>卡路里 /千卡</p>
                                 </div>
                              </div>
                            </div>
                        </div>
                        </div>
                    </div>

                    <div class="row index-dog-row"></div> 

                     <div class="row">
                      <div class="col">
                        <div class="card">
                            <div class="item item-divider item-top">
                               <img src="img/toushiqi.png"/>
                               <label>投食器</label>
                               <span class="ts-zhuangtai">良好
                                 <em class="em"></em>
                              <i class="icon ion-chevron-right"></i></span>
                            </div>
                            <div class="item item-divider item-footer item-divider-bg item-toushi">
                              <div class="row">
                                 <div class="col">
                                   <i>8:00<em>am</em></i>
                                  
                                    <p>下次投食时间</p>
                                 </div>
                                 <div class="col">
                                    <i>02:20:10</i>
                                  
                                   <p>距离投食时间还有</p>
                                 </div>
                                 
                              </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </ion-content>
            </ion-view>
        </ion-tab>

        <ion-tab title="社交" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"  badge-style="badge-assertive">
            <ion-view>
                <ion-header-bar  class="bar-positive">
                    <h1 class="title">第二页</h1>
                </ion-header-bar>
                <ion-content>
                    <p>第二页</p>
                </ion-content>
            </ion-view>
        </ion-tab>

    <ion-tab title="铲屎官" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
            <ion-view>
                 <ion-header-bar  class="bar-positive bar-title">
                 <h4 class="title">铲屎官<a href="set.html"><img src="img/shezhi.png"></a></h4>
     </ion-header-bar>

     <ion-content>
        <div class="row row-title">
            <div class="col">
                <a href="officer-information.html">
                    <img src="img/gougou.png" />
                    <br>
                    <p>王多多</p>
                </a>
            </div>
        </div>

        <div class="row row-white row-sex">
            <div class="col ">
               <img src="img/xingbie.png"/> 女
            </div>
            <div class="col ">
                 <img src="img/zhiye.png"/> 教师
            </div>
             <div class="col ">
                 <img src="img/gril.png"/> 保密
            </div>
        </div>

        <div class="row row-up-down"></div> 

         <div class="row row-white row-img">
            <div class="col"><img src="img/pinzhong.png"/> 阿斯拉加</div>
            <div class="col right">
              
            </div>
        </div>
        <div class="row row-up-down"></div> 
       
        <div class="row row-white row-img">
            <div class="col col-name"><img src="img/xiaoxi.png"/> 我的消息</div>
            <div class="col right">
                <a href="message.html"><i class="icon ion-chevron-right"></i></a>
            </div>
        </div>
       
        <div class="row line"></div>
        <div class="row row-white row-img">
            <div class="col col-name"><img src="img/card.png"/> 我的卡券</div>
            <div class="col right">
                <a href="card.html"><i class="icon ion-chevron-right"></i></a>
            </div>
        </div>

        <div class="row row-up-down"></div> 
       
        <div class="row row-white row-img">
            <div class="col col-name"><img src="img/cgongwuyisheng.png"/> 宠物医生</div>
            <div class="col right-checkbox-toggle">
                <label class="toggle toggle-calm">
                        <input type="checkbox" checked="">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                 </label>
            </div>
        </div>

        <div class="row row-up-down"></div> 

        <div class="row row-white row-img">
            <div class="col col-name"><img src="img/shiyongzhinan.png"/> 使用指南</div>
            <div class="col right">
                <i class="icon ion-chevron-right"></i>
            </div>
        </div>
        <div class="row line"></div>
        <div class="row row-white row-img">
            <div class="col col-name"><img src="img/wodeshebei.png"/> 我的设备</div>
            <div class="col right">
                <a href="equipment.html">  <i class="icon ion-chevron-right"></i></a>
            </div>
        </div>
        <div class="row line"></div>
        <div class="row row-white row-img">
            <div class="col col-name"><img src="img/zixunzijian-.png"/> 咨询投诉</div>
            <div class="col right">
                <a href="opinion-consultation.html"><i class="icon ion-chevron-right"></i></a> 
            </div>
        </div>
         
     </ion-content>
            </ion-view>
        </ion-tab>

    </ion-tabs>
    
  </body>
</html>
<script type="text/javascript">
     angular.module('mySuperApp', ['ionic'])
        .controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {

           //  alert（警告） 对话框
           $scope.showAlert = function() {
             var alertPopup = $ionicPopup.alert({
               title: '提示  <b>x</b>',
               template: '您的宠物已经超出规定范围请及时查看',
               buttons: [
                   {
                     text: '前往',
                     type: 'button-positive'   
                   },
                ]
             });
             
           };
        });
</script>
